import logo3 from "@/assets/logo_images/logo3.png"
import { Form, Input, Button } from 'antd'
import { User, Unlock } from '@icon-park/react'
function LoginForm() {
  // const [formData] = useState({})
  const [form] = Form.useForm()
  //form.setFieldsValue(formData)//用于回显给他赋值
  //  //form.resetFields()//重置表单验证
  const onFinish = (values: any) => {
    console.log(values)
  }
  const rules = {
    username: [
      { required: true, message: '请输入用户名' },
    ],
    password: [
      { required: true, message: '请输入密码' },
    ],
  }
  return (
    <>
      <div className="login-title">
        <img className="logo" src={logo3} alt="logo" />
      </div>
      <Form name="basic"
        form={form}
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        style={{ maxWidth: 600 }}
        layout='vertical'
        onFinish={onFinish} autoComplete="off">
        <Form.Item label="用户名" name="username" rules={rules.username}>
          <Input prefix={<User className="iconColor" />} />
        </Form.Item>
        <Form.Item label="密码" name="password" rules={rules.password}>
          <Input.Password prefix={<Unlock className="iconColor" />} />
        </Form.Item>
      </Form>
      {/* <Button onClick={() => form.submit()}>保存</Button>
      <Button onClick={() => form.resetFields()}>重置</Button> */}
      <Button type="primary" onClick={() => form.submit()} style={{ width: '100%' }}>登录</Button>
    </>
  )
}

export default LoginForm
